<template>
  <!-- 地图第三级展示 -->
  <div class="leaderMapBaseBox" ref="mapComponentRef">
    <img
      src="@/assets/screenImg/commonImg/back.png"
      class="backBtn"
      @click="goBack"
      alt="" />
    <BaseMap @getMap="getTheMap" idName="screen-leader-map" height="100%" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { jsonParseStringfy } from "@/common/utils/GlobalUtils";
import BaseMap from "@/components/BaseMap";

const mapState = reactive({
  theMap: null,
  allMarkersArr: [],
  allPointsArr: [],
});
const closeImg = require("@/assets/screenImg/commonImg/close.png");
// 判断标记点的图片
const markIconArr = reactive({
  商铺: require("@/assets/screenImg/commonImg/商铺.png"),
  农贸市场: require("@/assets/screenImg/commonImg/农贸市场.png"),
  教育: require("@/assets/screenImg/commonImg/教育.png"),
  医疗: require("@/assets/screenImg/commonImg/医疗.png"),
  养老: require("@/assets/screenImg/commonImg/养老.png"),
  社区: require("@/assets/screenImg/commonImg/社区.png"),
  文体绿道: require("@/assets/screenImg/commonImg/文体绿道.png"),
  乡村振兴: require("@/assets/screenImg/commonImg/乡村振兴.png"),
  经营性点位: require("@/assets/screenImg/commonImg/经营性点位.png"),
});

// 获取地图实例
const getTheMap = (map) => {
  mapState.theMap = map;
  let mapStyle = {
    style: "midnight", //设置地图风格
    // style: "googlelite", //设置地图风格
  };
  mapState.theMap.setMapStyle(mapStyle);

  // 设置中心点
  // mapState.theMap.centerAndZoom(newPoint, 15);
};

// 定义向父组件传值方法
const emits = defineEmits(["nextMap"]);

// 初始化地图 - 父组件调用
const initBaseMap = (mapData, currentMarkInfo) => {
  console.log("基础图获取的地图数据：", mapData);
  console.log("高新区地图上点击的位置信息：", currentMarkInfo);
  mapState.theMap.clearOverlays();
  let myData = [
    {
      type: 1,
      name: "商铺",
      state: "自由/委托",
      income: 5245,
      expend: 4512,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.0277094,
      lat: 30.62022516,
    },
    {
      type: 2,
      name: "农贸市场",
      state: "自由/委托",
      income: 12245,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.02730044,
      lat: 30.60238385,
    },
    {
      type: 3,
      name: "教育",
      state: "自由/委托",
      income: 21245,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.0187768,
      lat: 30.58104587,
    },
    {
      type: 4,
      name: "医疗",
      state: "自由/委托",
      income: 245,
      expend: 45212,
      profit: 54642,
      address: "新川公园",
      area: 500,
      lng: "104.09130",
      lat: "30.51967",
    },
    {
      type: 5,
      name: "养老",
      state: "自由/委托",
      income: 5145,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.02341424,
      lat: 30.54719479,
    },
    {
      type: 6,
      name: "社区",
      state: "自由/委托",
      income: 45,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.06770445,
      lat: 30.51970589,
    },
    {
      type: 7,
      name: "文体绿道",
      state: "自由/委托",
      income: 1245,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.10872119,
      lat: 30.55198085,
    },
    {
      type: 8,
      name: "乡村振兴",
      state: "自由/委托",
      income: 52145,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好",
      area: 500,
      lng: 104.07588719,
      lat: 30.56927389,
    },
    {
      type: 9,
      name: "经营性点位",
      state: "自由/委托",
      income: 52124,
      expend: 45212,
      profit: 54642,
      address: "是客户大家好地址",
      area: 500,
      lng: 104.05746041,
      lat: 30.61964859,
    },
  ];

  // 请求成功后根据返回数据遍历调用
  myData.map((n, i) => {
    initMarksAndInfo(n);
    let point = new BMap.Point(n.lng, n.lat);
    mapState.allPointsArr.push(point);
  });
  // 根据提供的坐标[]设置地图视野
  let lile = jsonParseStringfy(mapState.allPointsArr);
  setTimeout(() => {
    mapState.theMap.setViewport(lile, { margins: [5, 5, 5, 5] });
  }, 500);
};

// 地图各工具的绘制
const initMarksAndInfo = (item) => {
  // 标记点
  const icon = markIconArr[item.name];
  const point = new BMap.Point(item.lng, item.lat);
  // 图标可视区域大小
  const iconSize = new BMap.Size(20, 24);
  const iocUrl = new BMap.Icon(icon, iconSize, {
    // 图标的定位点相对于图标左上角的偏移值
    anchor: new BMap.Size(0, 0),
    // 图标所用的图片的大小
    imageSize: iconSize,
    // 信息窗口开启位置相对于图标左上角的偏移值
    infoWindowAnchor: new BMap.Size(95, 130),
  });
  const marker = new BMap.Marker(point, {
    icon: iocUrl,
  });
  mapState.theMap.addOverlay(marker);

  // 标记点信息窗
  const markInfoText = [
    "<div class='screenMapInfoBox'>",
    "<div class='infoBox-header' style='margin-right:10px'>" +
      item.name +
      "</div>",
    "<div class='infoBox-content'>",
    "<div class='content-item'><label class='item-title'>收入：</label><span>" +
      item.income +
      "万元</span></div>",
    "<div class='content-item'><label class='item-title'>支出：</label><span>" +
      item.expend +
      "万元</span></div>",
    "<div class='content-item'><label class='item-title'>利润：</label><span>" +
      item.profit +
      "万元</span></div>",
    "<div class='content-item'><label class='item-title'>地址：</label><span>" +
      item.address +
      "</span></div>",
    "<div class='content-item'><label class='item-title'>面积：</label><span>" +
      item.area +
      "㎡</span></div>",
    "</div>",
  ];
  const markInfoBox = new BMapLib.InfoBox(
    mapState.theMap,
    markInfoText.join(""),
    {
      enableAutoPan: true,
      closeIconMargin: "-5px -10px 0 0", // 关闭按钮边距
      closeIconUrl: closeImg, // 关闭按钮的图片url
      align: INFOBOX_AT_TOP,
      offset: new BMap.Size(0, 120),
    }
  );

  marker.addEventListener("click", (e) => {
    // 改变地图中心为当前点
    setTimeout(() => {
      mapState.theMap.setViewport({
        center: new BMap.Point(e.point.lng, e.point.lat),
        zoom: 15,
      });
    }, 100);

    // 关闭已打开的infobox
    mapState.allMarkersArr.map((item) => {
      if (item.infoBox) {
        item.infoBox.close();
      }
    });
    // 点击标注显示信息窗体
    markInfoBox.open(marker);
    emits("nextMap", "hideAmountInfoBox");
  });
  marker.infoBox = markInfoBox;
  mapState.allMarkersArr.push(marker);
};

const goBack = () => {
  emits("nextMap", "GoGaoxinMap");
};

defineExpose({ initBaseMap });
</script>

<style lang="scss" scoped>
.leaderMapBaseBox {
  width: 100%;
  height: 100%;
  position: relative;
  .backBtn {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    left: 10px;
    z-index: 10;
    cursor: pointer;
  }
}
</style>

<style lang="scss">
.leaderMapBaseBox {
  .infoBox {
    img {
      width: 20px;
      height: 20px;
    }
    .screenMapInfoBox {
      width: 200px;
      height: 240px;
      background: url("@/assets/screenImg/commonImg/mapInfoBoxBg.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
      padding: 15px;
      color: #fff;
      text-shadow: 0px 0px 4px #fff;
      .infoBox-header {
        font-size: 18px;
        margin-bottom: 15px;
        letter-spacing: 2px;
      }
      .infoBox-content {
        padding: 0 5px;
        .content-item {
          margin-bottom: 12px;
          .item-title {
            letter-spacing: 2px;
          }
        }
      }
    }
  }
  // 去掉地图上的 logo
  .anchorBL {
    display: none;
  }
}
</style>
